<template>
  <div class="flash-sale" ref="container">
    <div class="saleBox">
      <div class="header" v-if="timeList[active]">
        <img :src="timeList[active].slide" />
      </div>
    </div>
    <div class="logoPic">
      <img src="../../assets/images/baokuan.png" />
    </div>
    <div class="time-tabs">
      <div class="list">
        <div
          class="item acea-row row-between-wrapper"
          v-for="(shopByCard, indexSeckill) in shopByCardList"
          :key="indexSeckill"
          @click="goDetail(shopByCard.id)"
        >
          <div class="pictrue">
            <img :src="shopByCard.image" />
          </div>
          <div class="text acea-row row-column-around">
            <div class="line1" v-text="shopByCard.store_name"></div>
            <div class="money">
              <span
                class="num font-color-red"
                v-text="'￥' + shopByCard.vip_price"
              ></span>
              <span v-text="'￥' + shopByCard.price" class="ot_price"></span>
            </div>
            <div class="stock">
              限量<span v-text="shopByCard.stock + '件'"></span>
            </div>
          </div>
          <div class="grab bg-color-red" v-if="shopByCard.stock > 0">
            去提货
          </div>
          <div class="grab bg-color-hui" v-if="shopByCard.stock <= 0">
            已售罄
          </div>
        </div>
      </div>
      <div
        class="noCommodity"
        v-cloak
        v-if="shopByCardList.length === 0 && page !== 1"
      >
        <div class="noPictrue">
          <img src="@assets/images/noGood.png" class="image" />
        </div>
      </div>
      <Loading
        :loaded="status"
        :loading="loadingList"
        v-if="shopByCardList.length > 0"
      ></Loading>
    </div>
  </div>
</template>
<script>
import { getSeckillConfig, getShopByCardList } from "@api/activity";
import Loading from "@components/Loading";
export default {
  name: "GoodsSeckill",
  components: {
    Loading
  },
  props: {},
  data: function() {
    return {
      timeList: [],
      sticky: false,
      loading: false,
      datatime: 0,
      active: 0,
      shopByCardList: [],
      status: false, //砍价列表是否获取完成 false 未完成 true 完成
      loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
      page: 1, //页码
      limit: 5 //数量
    };
  },
  mounted: function() {
    this.mountedStart();
  },
  methods: {
    mountedStart: function() {
      var that = this;
      getSeckillConfig().then(res => {
        that.$set(that, "timeList", res.data.seckillTime);
        that.$set(that, "active", res.data.seckillTimeIndex);
        that.datatime = that.timeList[that.active].stop;
        that.loadingList = false;
        that.getshopByCardList();
        that.$nextTick(function() {
          that.sticky = true;
          // that.$refs.timeList.scrollIntoView();
        });
      });
      this.$scroll(this.$refs.container, () => {
        !this.loadingList && this.getshopByCardList();
      });
      setTimeout(function() {
        that.loading = true;
      }, 500);
    },
    setTime: function(index) {
      var that = this;
      that.active = index;
      that.datatime = that.timeList[that.active].stop;
      that.shopByCardList = [];
      that.page = 1;
      that.status = false;
      that.loadingList = false;
      that.getshopByCardList();
    },
    getshopByCardList: function() {
      var that = this;
      if (that.loadingList) return;
      if (that.status) return;
      that.loadingList = true;
      getShopByCardList({ page: that.page, limit: that.limit })
        .then(res => {
          that.status = res.data.length < that.limit;
          that.shopByCardList.push.apply(that.shopByCardList, res.data);
          that.page++;
          that.loadingList = false;
        })
        .catch(() => {
          that.loadingList = false;
        });
    },
    goDetail: function(id) {
      this.$router.push({
        // 跳转详情
        path: "/detail/" + id,
        query: {
          tag: "shopbycard"
        }
      });
    }
  }
};
</script>
<style scoped>
.cart-color {
  border: none !important;
}
.saleBox {
  width: 100%;
  height: 2.54rem;
  background: #f44939;
  opacity: 1;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 0.24rem 0.2rem 0 0.2rem;
  box-sizing: border-box;
}
.header {
  width: 100%;
  height: 3rem;
  box-sizing: border-box;
  margin-top: 0.4rem;
  border-radius: 0.2rem 0.2rem 0 0;
  overflow: hidden;
  background: #f5f5f5;
}
.header img {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
  overflow: hidden;
}
.timeItem {
  font-size: 0.22rem;
  color: #333;
  width: 100%;
  text-align: center;
  background-color: #f5f5f5;
  padding: 0.21rem 0 0.28rem 0;
}
.flash-sale {
  height: 100%;
  background: #f5f5f5 !important;
}
.time-tabs {
  background: #f5f5f5;
  padding-top: 2.2rem;
}
.time-tabs.van-tabs--line {
  padding: 0;
  background: #f5f5f5;
}
.timeItem .time {
  font-size: 0.36rem;
  font-weight: bold;
  height: 0.5rem;
  line-height: 0.5rem;
}
.timeItem .state {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.2rem;
  width: auto;
  margin: auto;
}
.activity {
  color: #333;
}
.flash-sale .list .item .grab {
  background-color: #999;
}
.logoPic {
  width: 0.75rem;
  height: 0.7rem;
  position: absolute;
  top: 3.9rem;
  z-index: 32;
  left: 3.5%;
}
.logoPic img {
  width: 100%;
  height: 100%;
}
.list {
  padding: 0 0.2rem;
}
.stock {
  color: #999999;
  font-size: 0.22rem;
  margin-bottom: 0.08rem;
}
.ot_price {
  text-decoration: line-through;
  color: #999999;
  font-size: 0.24rem;
}
</style>
